<template>
	<view>
		<view class="content">
				<tie :item="item" :click="false" v-if='item.id>0'></tie>
			<u-line color="#F1F1F1" />
			<view style="height: 10px;"></view>
			<u-section :right="false" font-size="32" title="评论列表" line-color="red"
				style="margin-top: 10px;margin-bottom: 10px;"></u-section>
			<view style="height: 10px;"></view>

			<view style="margin-left: -10px; margin-right: -10rpx;" class="comment" v-for="(res, index) in list"
				:key="res.id" @click="reply(index)">
				<view class="left">
					<image :src="res.url" mode="aspectFill"></image>
				</view>
				<view class="right">
					<view class="top">
						<view class="name">{{ res.name }}</view>
						<view class="like" :class="{ highlight: res.isLike }">
							<view class="num">{{ res.likeNum }}</view>
							<u-icon v-if="!res.isLike" name="thumb-up" :size="30" color="#9a9a9a"
								@click="getLike(res.id,index)"></u-icon>
							<u-icon v-if="res.isLike" name="thumb-up-fill" color="red" :size="30" @click="getLike(res.id,index)"></u-icon>
						</view>
					</view>
					<view class="content">{{ res.contentText }}</view>
					<view class="reply-box">
						<view class="item" v-for="(item, index1) in res.replyList" :key="index1" @tap.stop="sreply(res.replyList,index1)" v-if="res.readnum>index1">
							<view class="username">{{ item.name }}</view>
							<view class="text">{{ item.contentStr }}
							 <text class="aftername" v-if="item.aftername">@{{item.aftername}}</text>
							 <text  v-if="item.aftercontent">{{item.aftercontent}}</text>
							</view>
						</view>
						<view class="all-reply" @tap.stop="toAllReply(index)" v-if="res.replyList != undefined && res.replyList.length>readnum">
							共{{ res.replyList.length }}条回复
							<u-icon v-if="res.readnum==readnum" class="more" name="arrow-down" :size="26"></u-icon>
							<u-icon v-else class="more" name="arrow-up" :size="26"></u-icon>
						</view>
					</view>
					<view class="bottom">
						{{ res.date }}
						<!-- <view class="reply">回复</view> -->
					</view>
				</view>
			</view>
           <u-loadmore v-if="!nodata" :load-text="loadText" :status="status" icon-type="flower" margin-top="20"
           	margin-bottom="20" />
            <u-empty text=" 暂无评论" mode="list" v-if="nodata"></u-empty>
			
            <view style="height: 70px;"></view>
		</view>

		<view class="foot" >
			<view class="foot_input">
				<u-input placeholder="请输入评论内容" class="uni-input"  cursor-spacing="0"  v-model="comment"  :border="true"  />
			</view>
			<view class="foot_button">
				<u-button type="error" throttle-time="500" @click="add_comment">发布</u-button>
			</view>

		</view>
		<auth :isauth="check_auth"></auth>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				readnum:3,
				count:0,
				replyid:0,
				sonreplyid:0,
				item:{},
				id:0,
				user:{},
				comment: "",
				commentList: [],
				cid:0,
				status: 'loadmore',
				page: 1,
				nodata: false,
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				pageshow: false,
				list: [],
			}
		},
		
		async onLoad(e) {
			if (e.id){
				this.id=e.id
			}
			//#ifdef H5
			if (!uni.getStorageSync("user")){
				 let a=await this.h5login()
			}
			// #endif
			// #ifdef MP
			if (!uni.getStorageSync("user")){
				 let a=await this.wxlogin()
			}
			// #endif
			this.user=uni.getStorageSync("user")
			this.get_tie()
			this.item_list()
			
			
			//this.getComment();
		},
		onShareAppMessage:function(){
			
		},
		onPullDownRefresh() {
			this.page=1
			this.item_list()
		},
		onReachBottom() {
			if (this.status != 'loadmore') {
				return;
			}
			this.status = "loading"
			this.page++;
			this.item_list()
		},
		methods: {
			
			reply(index){
				let comment=this.list[index]
				this.replyid=comment.id
				this.comment="回复"+comment.name+": "
			    console.log(this.replyid)
			},
			sreply(res,index){
				let comment=res[index]
				this.replyid=comment.id
				this.comment="回复"+comment.name+": "
				console.log(this.replyid,index)
			},
			item_list() {
				this.$u.post('index.php?mod=app&act=list&table=comment', {
					limit: 6,
					tieid:this.id,
					uid:this.user.id,
					page: this.page,
					xcx:1
				}).then(res => {
					uni.stopPullDownRefresh();
					this.pageshow = true
					this.active = false
					let total = res.count
					this.count = res.count
					
					if (this.page == 1)
						this.list = res.data
					else
						this.list = this.list.concat(res.data)
			      
					if (total == this.list.length) {
			
						if (this.list.length == 0) {
							this.nodata = true
						} else
							this.status = "nomore"
						//this.loadText.nomore = (this.total > res.pagesize) ? "实在没有了" : ""
					} else {
						this.status = "loadmore"
					}
			
				});
			},
            add_comment(){
				
				// let index=this.list.findIndex(function(value){
				// 	return value.id==22
				// })
				// console.log(index,100);return
				if (this.comment=="" || !this.comment){
					this.msg("评论内容不能为空");return
				}
				this.$u.post('index.php?class=comment&act=add', {
					content: this.comment,
					tieid:this.id,
					replyid:this.replyid,
					sonreplyid:this.sonreplyid,
					uid:this.user.id
				}).then(res => {
					this.comment=""
					if (res.code == 0) {
						this.nodata=false
						if (res.data.replyid==0){
						
							this.page=1;
							this.item_list();
						}else{
							
							let index=this.list.findIndex(function(value){
								return value.id==res.data.replyid
							})
							console.log(index,100)
							this.list[index].replyList.unshift(res.other)
						}
					} else {
						this.msg(res.msg)
					}
				
				});
			},
			get_tie() {

				this.$u.post('index.php?class=tie&act=view', {
					uid:this.user.id,
					id: this.id,
				}).then(res => {
					if (res.code == 0) {
						this.item=res.data
					} else {
						this.msg(res.msg)
					}

				});
			},
			// 跳转到全部回复
			toAllReply(index) {
			 if (this.list[index].readnum>this.readnum)
			    this.list[index].readnum=this.readnum
				else
			    this.list[index].readnum=10000
				
			},
			// 点赞
			getLike(comment_id,index) {
				console.log(comment_id,index)
				this.$u.post('index.php?class=cfav&act=addedi', {
					comment_id: comment_id,
					 uid:this.user.id
				}).then(res => {
					if (res.code == 0) {
						if (res.msg=="add"){
							this.list[index].isLike=true
							this.list[index].likeNum++;
						}else{
							this.list[index].isLike=false
							this.list[index].likeNum--;
						}
						  
					} else {
						this.msg(res.msg)
					}
				
				});
				// this.commentList[index].isLike = !this.commentList[index].isLike;
				// if (this.commentList[index].isLike == true) {
				// 	this.commentList[index].likeNum++;
				// } else {
				// 	this.commentList[index].likeNum--;
				// }
			},
			// 评论列表
			getComment() {
				this.commentList = [{
						id: 1,
						name: '叶轻眉',
						date: '12-25 18:58',
						contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
						url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
						allReply: 12,
						likeNum: 33,
						isLike: false,
						replyList: [{
								name: 'uview',
								contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
							},
							{
								name: '粘粘',
								contentStr: '今天吃什么，明天吃什么，晚上吃什么，我只是一只小猫咪为什么要烦恼这么多'
							}
						]
					},
					{
						id: 2,
						name: '叶轻眉1',
						date: '01-25 13:58',
						contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
						allReply: 0,
						likeNum: 11,
						isLike: false,
						url: 'https://cdn.uviewui.com/uview/template/niannian.jpg',
					},
					{
						id: 3,
						name: '叶轻眉2',
						date: '03-25 13:58',
						contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
						allReply: 0,
						likeNum: 21,
						isLike: false,
						allReply: 2,
						url: '../../../static/logo.png',
						replyList: [{
								name: 'uview',
								contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
							},
							{
								name: '豆包',
								contentStr: '想吃冰糖葫芦粘豆包，但没钱5555.........'
							}
						]
					},
					{
						id: 4,
						name: '叶轻眉3',
						date: '06-20 13:58',
						contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
						url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
						allReply: 0,
						likeNum: 150,
						isLike: false
					}
				];
			}
		}
	}
</script>



<style lang="scss" scoped>
	.aftername{color:blue;padding-right: 5px;}
	.foot {
		width: 750rpx;
		background: white;
		padding: 20rpx;
		display: flex;
		position: fixed;
		bottom: 0px;
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
	}

	.foot_button {
		width: 100rpx;
	}

	.foot_input {
		width: 580rpx;
	}

	.comment {
		display: flex;
		padding: 30rpx;

		.left {
			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #f2f2f2;
			}
		}

		.right {
			flex: 1;
			padding-left: 20rpx;
			font-size: 30rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.name {
					color: #333;
				}

				.like {
					display: flex;
					align-items: center;
					color: #9a9a9a;
					font-size: 26rpx;

					.num {
						margin-right: 4rpx;
						color: #9a9a9a;
					}
				}

				.highlight {
					color: #333;

					.num {
						color: #333;
					}
				}
			}

			.content {
				margin-bottom: 10rpx;
			}

			.reply-box {
				background-color: rgb(242, 242, 242);
				border-radius: 12rpx;

				.item {
					padding: 20rpx;
					border-bottom: solid 2rpx $u-border-color;

					.username {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.all-reply {
					padding: 20rpx;
					display: flex;
					color: #333;
					align-items: center;

					.more {
						margin-left: 6rpx;
					}
				}
			}

			.bottom {
				margin-top: 20rpx;
				display: flex;
				font-size: 24rpx;
				color: #9a9a9a;

				.reply {
					color: #333;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>
